<template>
  <div class="edit-good-container">
    <h2 class="title">编辑货物</h2>
    <el-form :model="good" class="edit-form" @submit.prevent="handleSubmit">
      <el-form-item label="名称" prop="name">
        <el-input v-model="good.name" placeholder="请输入货物名称" required></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number v-model="good.quantity" :min="0" placeholder="请输入货物数量" required></el-input-number>
      </el-form-item>
      <el-button type="primary" class="save-button">保存</el-button>
    </el-form>
  </div>
</template>

<script>
import { updateGood } from '@/api/goods';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const good = ref({ name: '', quantity: null });

    const loadGood = async (id) => {
      // 假设这里有一个获取特定货物详情的方法，例如 getGoodById
      // const response = await getGoodById(id);
      // good.value = response.data;
      // 示例数据填充
      good.value = { id: id, name: '示例名称', quantity: 100 }; // 仅作为示例
    };

    const handleSubmit = async () => {
      try {
        await updateGood(route.params.id, good.value);
        router.push('/goods');
      } catch (error) {
        console.error('Error updating good:', error);
      }
    };

    onMounted(() => {
      loadGood(route.params.id);
    });

    return {
      good,
      handleSubmit,
    };
  },
};
</script>

<style scoped>
.edit-good-container {
  padding: 20px;
  max-width: 400px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.edit-form {
  width: 100%;
}

.save-button {
  width: 100%;
  margin-top: 20px;
}
</style>